<template>
  <div ref="circleChartsRef" class="circle"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted, onUnmounted } from 'vue'
const option = {
  color: ['grey', 'red'],
  legend: {
    bottom: 20,
    orient: 'horizontal',
    left: 'center',
  },
  series: [
    {
      type: 'pie',
      radius: ['35%', '45%'],
      avoidLabelOverlap: !0,
      label: {
        alignTo: 'edge',
        radius: '10%',
        formatter: '{b}\n{d}%',
        minMargin: 15,
        edgeDistance: 20,
        lineHeight: 25,
        fontSize: 14,
        color: 'inherit',
      },
      data: [
        { value: 88, name: '线下观众人数' },
        { value: 75, name: '线上观众人数' },
      ],
    },
  ],
}
const circleChartsRef = ref()
let myChart
const init = () => {
  const chartDom = circleChartsRef.value
  if (myChart) echarts.dispose(chartDom)
  myChart = echarts.init(chartDom)
  option && myChart.setOption(option)
}
onMounted(() => {
  init()
  window.addEventListener('resize', function () {
    init()
  })
})
onUnmounted(() => {
  window.removeEventListener('resize')
})
</script>

<style scoped lang="scss">
.circle {
  width: 400px;
  height: 400px;
}
</style>
